<template>
  <div class="blockchain-donation-platform">
    <!-- 头部 -->
    <header class="app-header">
      <div class="header-content">
        <div class="logo-section">
          <div class="logo-container">
            <img src="https://picsum.photos/id/237/60/60" alt="平台Logo" class="logo">
            <div class="logo-glow"></div>
          </div>
          <h1>区块链公益捐赠平台</h1>
        </div>
        <div class="user-info">
          <div class="account-balance">
            <i class="fas fa-wallet"></i>
            <span>余额: {{ accountBalance }} ETH</span>
          </div>
          <button class="connect-wallet-btn" @click="connectWallet">
            <i class="fas fa-home"></i> 返回主页
          </button>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="app-main">
      <!-- 捐赠流程 -->
      <div class="donation-process">
        <div class="steps-indicator">
          <div
            v-for="(step, index) in steps"
            :key="index"
            class="step-item"
            :class="{ 'active': currentStep === index, 'completed': currentStep > index }"
            @click="goToStep(index)"
          >
            <div class="step-icon-container">
              <div class="step-icon-bg">
                <div class="step-icon">
                  <template v-if="currentStep > index">
                    <i class="fas fa-check"></i>
                  </template>
                  <template v-else>
                    <span class="step-number">{{ index + 1 }}</span>
                  </template>
                </div>
              </div>
            </div>
            <div class="step-title">{{ step.title }}</div>
          </div>
        </div>
        <div class="steps-progress">
          <div class="progress-bar" :style="{ width: progressWidth }"></div>
        </div>
      </div>

      <div class="step-content-container">
        <!-- 选择捐赠项目 -->
        <transition :name="transitionName" mode="out-in">
          <div v-if="currentStep === 0" key="step1" class="step-content">
            <div class="project-selection">
              <h2 class="section-title">
                <i class="fas fa-search"></i> 选择捐赠项目
                <span class="section-subtitle">所有项目资金流向公开透明，100%直达受助方</span>
              </h2>
              <div class="search-filter">
                <div class="search-box">
                  <i class="fas fa-search"></i>
                  <input
                    v-model="searchQuery"
                    type="text"
                    placeholder="搜索项目..."
                    class="search-input"
                  />
                </div>
                <div class="filter-options">
                  <button
                    class="filter-btn"
                    @click="filterType = ''"
                    :class="{ 'active': filterType === '' }"
                  >
                    全部
                  </button>
                  <button
                    class="filter-btn"
                    @click="filterType = '教育'"
                    :class="{ 'active': filterType === '教育' }"
                  >
                    教育
                  </button>
                  <button
                    class="filter-btn"
                    @click="filterType = '健康'"
                    :class="{ 'active': filterType === '健康' }"
                  >
                    健康
                  </button>
                  <button
                    class="filter-btn"
                    @click="filterType = '环境'"
                    :class="{ 'active': filterType === '环境' }"
                  >
                    环境
                  </button>
                </div>
              </div>
              <div class="project-list">
                <div
                  v-for="project in filteredProjects"
                  :key="project.id"
                  class="project-item"
                  @click="selectProject(project)"
                >
                  <div class="project-image-container">
                    <img :src="project.image" alt="项目图标" class="project-image">
                    <div class="project-type-badge" :class="project.type.toLowerCase()">{{ project.type }}</div>
                  </div>
                  <div class="project-info">
                    <h3>{{ project.name }}</h3>
                    <p class="project-description">{{ project.description }}</p>
                    <div class="project-stats">
                      <div class="stat-item">
                        <span class="stat-label">目标资金:</span>
                        <span class="stat-value">{{ project.goal }} ETH</span>
                      </div>
                      <div class="stat-item">
                        <span class="stat-label">当前捐赠:</span>
                        <span class="stat-value">{{ project.raised }} ETH</span>
                      </div>
                      <div class="stat-item">
                        <span class="stat-label">已资助:</span>
                        <span class="stat-value">{{ project.peopleHelped }} 人</span>
                      </div>
                    </div>
                    <div class="project-progress">
                      <div class="progress-bar-container">
                        <div
                          class="progress-fill"
                          :style="{ width: projectProgress(project) + '%', backgroundColor: getProgressColor(projectProgress(project)) }"
                        ></div>
                      </div>
                      <div class="progress-text">
                        {{ projectProgress(project) }}% 已完成
                      </div>
                    </div>
                    <button
                      class="btn btn-primary"
                      :class="{ disabled: project.raised >= project.goal }"
                      :disabled="project.raised >= project.goal"
                    >
                      <template v-if="project.raised >= project.goal">
                        <i class="fas fa-check-circle"></i> 项目已完成
                      </template>
                      <template v-else>
                        <i class="fas fa-arrow-right"></i> 立即捐赠
                      </template>
                    </button>
                  </div>
                </div>
              </div>
              <div v-if="filteredProjects.length === 0" class="no-results">
                <i class="fas fa-exclamation-circle"></i>
                <p>没有找到符合条件的项目，请尝试其他过滤条件</p>
              </div>
            </div>
          </div>
        </transition>

        <!-- 选择支付方式 -->
        <transition :name="transitionName" mode="out-in">
          <div v-if="currentStep === 1" key="step2" class="step-content">
            <div class="payment-method-selection">
              <h2 class="section-title">
                <i class="fas fa-wallet"></i> 选择支付方式
              </h2>
              <div class="payment-methods">
                <div
                  v-for="(method, index) in paymentMethods"
                  :key="index"
                  class="payment-method-item"
                  @click="selectPaymentMethod(method)"
                  :class="{ 'active': selectedPaymentMethod === method }"
                >
                  <div class="method-icon">
                    <i :class="method.icon"></i>
                  </div>
                  <span>{{ method.name }}</span>
                </div>
              </div>

              <div v-if="selectedPaymentMethod" class="payment-info">
                <h3>请输入支付信息</h3>
                <div v-if="selectedPaymentMethod.name === '加密货币'" class="crypto-payment-form">
                  <div class="input-group">
                    <label for="donation-amount">捐赠金额 (ETH)</label>
                    <div class="input-wrapper">
                      <input
                        id="donation-amount"
                        v-model="cryptoAmount"
                        type="number"
                        step="0.01"
                        min="0"
                        class="input-field"
                        placeholder="0.00"
                      />
                      <div class="max-btn" @click="setMaxAmount">
                        <i class="fas fa-external-link-alt"></i> 最大值
                      </div>
                    </div>
                  </div>
                  <div class="account-selector">
                    <label for="crypto-account">选择账户</label>
                    <select
                      id="crypto-account"
                      v-model="selectedAccount"
                      class="input-field"
                    >
                      <option value="" disabled selected>选择一个账户</option>
                      <option
                        v-for="account in accounts"
                        :key="account"
                        :value="account"
                      >
                        {{ formatAddress(account) }}
                        <span class="account-balance">
                          ({{ getAccountBalance(account) }} ETH)
                        </span>
                      </option>
                    </select>
                  </div>
                  <input v-model="donationMemo" placeholder="捐赠留言（可选）" maxlength="200" />
                </div>
                <div v-else class="credit-card-payment">
                  <div class="input-group">
                    <label for="card-number">信用卡号</label>
                    <div class="input-wrapper">
                      <input
                        id="card-number"
                        v-model="cardNumber"
                        type="text"
                        class="input-field"
                        placeholder="**** **** **** ****"
                        maxlength="19"
                        @input="formatCardNumber"
                      />
                    </div>
                  </div>
                  <div class="input-row">
                    <div class="input-group">
                      <label for="expiry-date">有效期</label>
                      <div class="input-wrapper">
                        <input
                          id="expiry-date"
                          v-model="expiryDate"
                          type="text"
                          class="input-field"
                          placeholder="MM/YY"
                          maxlength="5"
                          @input="formatExpiryDate"
                        />
                      </div>
                    </div>
                    <div class="input-group">
                      <label for="cvv">CVV</label>
                      <div class="input-wrapper">
                        <input
                          id="cvv"
                          v-model="cvv"
                          type="text"
                          class="input-field"
                          placeholder="***"
                          maxlength="3"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <button
                  @click="confirmDonation"
                  class="btn btn-primary"
                  :disabled="!isValidPaymentInfo"
                >
                  <i class="fas fa-paper-plane"></i> 确认支付
                </button>
              </div>
              <div v-else class="payment-info-placeholder">
                <i class="fas fa-info-circle"></i>
                <p>请选择支付方式继续</p>
              </div>
            </div>
          </div>
        </transition>

        <!-- 确认捐赠信息 -->
        <transition :name="transitionName" mode="out-in">
          <div v-if="currentStep === 2" key="step3" class="step-content">
            <div class="donation-confirmation">
              <h2 class="section-title">
                <i class="fas fa-check-double"></i> 确认捐赠
              </h2>
              <div class="confirmation-details">
                <div class="detail-card">
                  <div class="detail-item">
                    <span class="detail-label">捐赠项目:</span>
                    <span class="detail-value">{{ selectedProject.name }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">项目描述:</span>
                    <span class="detail-value">{{ selectedProject.description }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">支付方式:</span>
                    <span class="detail-value">
                      {{ selectedPaymentMethod ? selectedPaymentMethod.name : '未选择' }}
                    </span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">捐赠金额:</span>
                    <span class="detail-value">
                      <template v-if="selectedPaymentMethod && selectedPaymentMethod.name === '加密货币'">
                        {{ cryptoAmount }} ETH
                      </template>
                      <template v-else>
                        ¥{{ formattedAmount }}
                      </template>
                    </span>
                  </div>
                </div>
                <div class="detail-card">
                  <div class="detail-item">
                    <span class="detail-label">支付账户:</span>
                    <span class="detail-value">{{ formatAddress(selectedAccount) }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">接收账户:</span>
                    <span class="detail-value">{{ metaMaskAccount ? formatAddress(metaMaskAccount) : '未连接MetaMask' }}</span>
                  </div>
                </div>
                <div class="detail-card">
                  <div class="detail-item">
                    <span class="detail-label">当前余额:</span>
                    <span class="detail-value">{{ getAccountBalance(selectedAccount) }} ETH</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">交易费用:</span>
                    <span class="detail-value">0.0001 ETH</span>
                  </div>
                </div>
              </div>
              <div class="summary-card">
                <div class="summary-header">
                  <span>总计:</span>
                  <span v-if="selectedPaymentMethod && selectedPaymentMethod.name === '加密货币'">
                    {{ cryptoAmount + 0.0001 }} ETH
                  </span>
                  <span v-else>¥{{ formattedAmount }}</span>
                </div>
                <div class="summary-description">
                  感谢您的慷慨捐赠！您的支持将帮助{{ selectedProject.name }}项目为更多有需要的人提供帮助。
                </div>
              
                <button
                  @click="submitDonation"
                  class="btn btn-primary"
                  
                >
                  <i class="fas fa-check"></i> 提交捐赠
                </button>
              </div>
            </div>
          </div>
        </transition>

        <!-- 捐赠成功 -->
      
<transition :name="transitionName" mode="out-in">
  <div v-if="currentStep === 3" key="step4" class="step-content">
    <div class="donation-success">
      <div class="success-icon-container">
        <div class="success-icon-glow"></div>
        <div class="success-icon">
          <i class="fas fa-check-circle"></i>
        </div>
      </div>
      <h2 class="section-title">
        <i class="fas fa-heart"></i> 捐赠成功！
      </h2>
      <div class="success-details">
        <div class="detail-item">
          <span class="detail-label">感谢您的捐赠:</span>
          <span class="detail-value">
            <template v-if="selectedPaymentMethod && selectedPaymentMethod.name === '加密货币'">
              {{ cryptoAmount }} ETH
            </template>
            <template v-else>
              ¥{{ formattedAmount }}
            </template>
          </span>
        </div>
        <div class="detail-item">
          <span class="detail-label">捐赠项目:</span>
          <span class="detail-value">{{ selectedProject.name }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">交易哈希:</span>
          <span class="detail-value transaction-hash">{{ transactionHash }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">捐赠时间:</span>
          <span class="detail-value">{{ formattedDate }}</span>
        </div>
      </div>
      <div class="success-actions">
        <button @click="downloadCertificate" class="btn btn-primary">
          <i class="fas fa-download"></i> 下载捐赠证书
        </button>
        <button @click="goToTracking" class="btn btn-secondary">
          <i class="fas fa-search-dollar"></i> 实时追踪资金流向
        </button>
        <button @click="resetDonation" class="btn btn-outline">
          <i class="fas fa-redo"></i> 再次捐赠
        </button>
      </div>
    </div>
  </div>
</transition>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import Web3 from 'web3';
import { useRouter } from 'vue-router'
import contractData from 'E:/Vue3/vite-project/artifacts/contracts/DonationPlatform.sol/DonationPlatform.json';

const router = useRouter()
const contractAddress = '0x1f936366c9b21fC9343BC2DC710031aa01be072E';

const web3 = ref(null);
const contract = ref(null);
const accountBalance = ref(0);
const accounts = ref([]);
const currentStep = ref(0);
const transitionName = ref('slide-right');
const selectedProject = ref(null);
const selectedPaymentMethod = ref(null);
const cryptoAmount = ref(0);
const cardNumber = ref('');
const expiryDate = ref('');
const cvv = ref('');
const selectedAccount = ref('');
const transactionHash = ref('');
const formattedDate = ref('');
const projects = ref([]);
const loading = ref(true);
const searchQuery = ref('');
const filterType = ref('');
const metaMaskAccount = ref(''); 
const donationMemo = ref(""); 

const goToTracking = () => {
  router.push({
    path: '/MyTracking',
    query: {
      projectId: selectedProject.value.id,
      txHash: transactionHash.value
    }
  });
};


const steps = ref([
  { title: '选择项目' },
  { title: '支付方式' },
  { title: '确认信息' },
  { title: '完成' },
]);

const paymentMethods = ref([
  { name: '信用卡', icon: 'fas fa-credit-card' },
  { name: '加密货币', icon: 'fas fa-coins' },
]);

const filteredProjects = computed(() => {
  return projects.value.filter(project => {
    const matchesSearch = project.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                         project.description.toLowerCase().includes(searchQuery.value.toLowerCase());
    const matchesFilter = filterType.value === '' || project.type === filterType.value;
    return matchesSearch && matchesFilter;
  });
});

const progressWidth = computed(() => `${(currentStep.value / 3) * 100}%`);

const isValidPaymentInfo = computed(() => {
  if (!selectedPaymentMethod.value) return false;
  
  if (selectedPaymentMethod.value.name === '加密货币') {
    return cryptoAmount.value > 0 && selectedAccount.value !== '';
  } else {
    return cardNumber.value.length === 19 && 
           expiryDate.value.length === 5 && 
           cvv.value.length === 3;
  }
});

const isDonationValid = computed(() => {
  if (!selectedPaymentMethod.value) return false;
  
  if (selectedPaymentMethod.value.name === '加密货币') {
    const balance = getAccountBalance(selectedAccount.value);
    return cryptoAmount.value > 0 && (balance - cryptoAmount.value - 0.0001) >= 0;
  } else {
    return formattedAmount.value > 0;
  }
});

const formattedAmount = computed(() => {
  return (cryptoAmount.value * 2000).toFixed(2);
});

const projectProgress = (project) => {
  const progress = (project.raised / project.goal) * 100;
  return Math.min(progress, 100);
};

const getProgressColor = (progress) => {
  if (progress >= 70) return '#16db65';
  if (progress >= 30) return '#ffb800';
  return '#ff4d4f';
};

const formatAddress = (address) => {
  if (!address) return '';
  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
};

const loadBlockchainData = async () => {
  try {
    const ganacheUrl = 'http://localhost:7545';
    web3.value = new Web3(new Web3.providers.HttpProvider(ganacheUrl));
    
    const ganacheAccounts = await web3.value.eth.getAccounts();
    accounts.value = ganacheAccounts;
    selectedAccount.value = ganacheAccounts[0] || '';
    
    if (ganacheAccounts.length > 0) {
      const balance = await web3.value.eth.getBalance(ganacheAccounts[0]);
      accountBalance.value = parseFloat(web3.value.utils.fromWei(balance, 'ether'));
    }
    
    contract.value = new web3.value.eth.Contract(
      contractData.abi,
      contractAddress
    );
    
    const count = await contract.value.methods.projectCount().call();
    const loadedProjects = [];
    
    for (let i = 1; i <= count; i++) {
      const p = await contract.value.methods.getProject(i).call();
      
      loadedProjects.push({
        id: p.id,
        name: p.name,
        shortDescription: p.shortDescription,
        description: p.description,
        type: getTypeFromTag(p.tag), // 需要实现这个转换函数
        goal: parseFloat(web3.value.utils.fromWei(p.goal.toString(), 'ether')),
        raised: parseFloat(web3.value.utils.fromWei(p.raised.toString(), 'ether')),
        progress: p.progress,
        donors: p.donors,
        image: p.image || 'https://picsum.photos/id/237/400/300',
        walletAddress: p.walletAddress
      });
    }
    
    projects.value = loadedProjects;
  } catch (error) {
    console.error('加载区块链数据失败:', error);
  }
};

// 添加tag到type的转换函数
function getTypeFromTag(tag) {
  const types = ['教育', '健康', '环境', '公益'];
  return types[tag] || '公益';
}

const getAccountBalance = async (account) => {
  if (!account) return 0;
  try {
    const balance = await web3.value.eth.getBalance(account);
    return parseFloat(web3.value.utils.fromWei(balance, 'ether')).toFixed(4);
  } catch (error) {
    console.error('获取账户余额失败:', error);
    return 0;
  }
};

const connectWallet = () => {
  router.push('Home');
};

const selectProject = (project) => {
  selectedProject.value = project;
  goToStep(1);
};

const selectPaymentMethod = (method) => {
  selectedPaymentMethod.value = method;
};

const goToStep = (step) => {
  if (step < currentStep.value) {
    transitionName.value = 'slide-right';
  } else {
    transitionName.value = 'slide-left';
  }
  currentStep.value = step;
};

const setMaxAmount = async () => {
  if (selectedAccount.value) {
    const balance = await getAccountBalance(selectedAccount.value);
    cryptoAmount.value = Number(balance) - 0.0001;
  }
};

const formatCardNumber = (e) => {
  let value = e.target.value.replace(/\s+/g, '');
  if (value.length > 16) value = value.slice(0, 16);
  
  const formatted = value.match(/.{1,4}/g)?.join(' ') || '';
  cardNumber.value = formatted;
};

const formatExpiryDate = (e) => {
  let value = e.target.value.replace(/\//g, '');
  if (value.length > 4) value = value.slice(0, 4);
  
  if (value.length === 2) {
    expiryDate.value = `${value}/`;
  } else if (value.length > 2) {
    expiryDate.value = `${value.slice(0, 2)}/${value.slice(2)}`;
  } else {
    expiryDate.value = value;
  }
};

const confirmDonation = () => {
  goToStep(2);
};

const submitDonation = async () => {
  if (selectedPaymentMethod.value.name === '加密货币') {
    try {
      const donationAmount = web3.value.utils.toWei(
        cryptoAmount.value.toString(), 
        'ether'
      );

      // ✅ 使用合约的 donate 函数（带 gas 参数）
      const tx = await contract.value.methods
        .donate(selectedProject.value.id, "")
        .send({
          from: selectedAccount.value,
          value: donationAmount,
          gas: 5000000 
        });

      // ✅ 成功后记录交易信息
      transactionHash.value = tx.transactionHash;
      formattedDate.value = new Date().toLocaleString();

      // ✅ 更新项目数据
      selectedProject.value.raised = parseFloat(
        (
          parseFloat(selectedProject.value.raised) + 
          parseFloat(cryptoAmount.value)
        ).toFixed(4)
      );

      accountBalance.value = await getAccountBalance(selectedAccount.value);

      // 跳转到成功页
      goToStep(3);
    } catch (error) {
      console.error("捐赠失败:", error);
      alert(`捐赠失败：${error.message}`);
    }
  } else {
    // 非加密货币的模拟流程
    try {
      transactionHash.value = '0x' + Math.random().toString(36).substring(2, 10);
      formattedDate.value = new Date().toLocaleString();
      selectedProject.value.raised += parseFloat(cryptoAmount.value);
      goToStep(3);
    } catch (error) {
      console.error('支付失败:', error);
      alert('支付失败，请重试');
    }
  }
};



const downloadCertificate = () => {
  alert('捐赠证书下载功能将在此处实现');
};

const shareDonation = () => {
  alert('分享捐赠功能将在此处实现');
};

const resetDonation = () => {
  selectedProject.value = null;
  selectedPaymentMethod.value = null;
  cryptoAmount.value = 0;
  cardNumber.value = '';
  expiryDate.value = '';
  cvv.value = '';
  selectedAccount.value = accounts.value[0] || '';
  goToStep(0);
};

onMounted(() => {
  loadBlockchainData();
});

watch(selectedAccount, async (newAccount) => {
  if (newAccount) {
    accountBalance.value = await getAccountBalance(newAccount);
  }
});
</script>

<style scoped>
:root {
  --primary-color: #4361ee;
  --primary-light: #e6e9ff;
  --primary-gradient: linear-gradient(135deg, #4361ee, #3f37c9);
  --secondary-color: #4cc9f0;
  --secondary-light: #e6f7ff;
  --accent-color: #16db65;
  --accent-light: #e6ffed;
  --warning-color: #ffb800;
  --warning-light: #fff8e6;
  --error-color: #ff4d4f;
  --error-light: #ffe6e6;
  --dark-color: #1a1a2e;
  --light-color: #f8f9fa;
  --gray-color: #6c757d;
  --light-gray: #f1f3f5;
  --border-radius: 16px;
  --box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- 基础样式 --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #f0f2f5;
  color: var(--dark-color);
  line-height: 1.6;
}

/* --- 页面容器 --- */
.blockchain-donation-platform {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- 头部样式 --- */
.app-header {
  background: linear-gradient(135deg, white, #f8f9fa);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 25px 0;
  margin-bottom: 40px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo-container {
  position: relative;
}

.logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 0 20px rgba(67, 97, 238, 0.5);
  transition: var(--transition);
}

.logo:hover {
  transform: scale(1.05);
}

.logo-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--primary-color);
  opacity: 0.3;
  filter: blur(15px);
  z-index: -1;
}

.app-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: var(--text-shadow);
}

.user-info {
  display: flex;
  gap: 20px;
  align-items: center;
}

.account-balance {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-light);
  padding: 12px 20px;
  border-radius: var(--border-radius);
  color: var(--primary-color);
  font-weight: 500;
  box-shadow: 0 5px 15px rgba(67, 97, 238, 0.1);
}

.account-balance i {
  font-size: 1.2rem;
}

.connect-wallet-btn {
  background: var(--primary-gradient);
  color: rgb(45, 33, 216);
  border: none;
  padding: 12px 25px;
  border-radius: var(--border-radius);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.connect-wallet-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.15),
    transparent,
    rgba(255, 255, 255, 0.15)
  );
  transform: rotate(30deg);
  transition: var(--transition);
}

.connect-wallet-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(67, 97, 238, 0.4);
}

.connect-wallet-btn:hover::after {
  left: 150%;
}

/* --- 按钮样式 --- */
.btn {
  cursor: pointer;
  transition: var(--transition);
  border: none;
  outline: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  border-radius: var(--border-radius);
  padding: 12px 24px;
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
  z-index: 1;
}

.btn-primary {
  background: var(--primary-gradient);
  color: rgb(45, 33, 216);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #3a5ce7, #3632c0);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.3);
}

.btn-primary:hover::before {
  transform: scaleX(1);
}

.btn-secondary {
  background: var(--accent-color);
  color: white;
}

.btn-secondary:hover {
  background: #13a850;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(22, 219, 101, 0.3);
}

.btn-secondary:hover::before {
  transform: scaleX(1);
}

.btn-outline {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn-outline:hover {
  background-color: var(--primary-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(67, 97, 238, 0.1);
}

.btn-outline:hover::before {
  transform: scaleX(1);
}

.btn.disabled {
  background-color: var(--gray-color);
  cursor: not-allowed;
  transform: none;
  opacity: 0.7;
}

/* --- 捐赠流程 --- */
.donation-process {
  margin-bottom: 60px;
}

.steps-indicator {
  display: flex;
  justify-content: space-between;
  padding: 25px 0;
  position: relative;
}

.steps-indicator::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--light-gray), transparent);
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.step-item::before {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 4px;
  background: var(--primary-color);
  transition: var(--transition);
}

.step-item.active::before,
.step-item.completed::before {
  width: 100%;
}

.step-icon-container {
  position: relative;
}

.step-icon-bg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.step-item:not(.completed) .step-icon-bg {
  background: linear-gradient(135deg, #f0f2f5, white);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.step-item.active .step-icon-bg,
.step-item.completed .step-icon-bg {
  background: var(--primary-gradient);
  box-shadow: 0 0 20px rgba(67, 97, 238, 0.5);
}

.step-icon {
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  transition: var(--transition);
  position: relative;
  z-index: 1;
}

.step-item.active .step-icon,
.step-item.completed .step-icon {
  color: white;
}

.step-item.completed .step-icon {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.step-number {
  font-weight: 700;
  font-size: 1.2rem;
}

.step-title {
  font-size: 1rem;
  color: var(--gray-color);
  transition: var(--transition);
}

.step-item.active .step-title,
.step-item.completed .step-title {
  color: var(--primary-color);
  font-weight: 500;
}

.steps-progress {
  height: 6px;
  background-color: var(--light-gray);
  position: relative;
  margin-top: 10px;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--primary-gradient);
  border-radius: 3px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shine 2s infinite;
}

@keyframes shine {
  to { left: 100%; }
}

/* --- 步骤内容 --- */
.step-content-container {
  max-width: 100%;
  margin: 0 auto;
}

.step-content {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 40px;
  transition: var(--transition);
  transform: translateY(0);
}

.step-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* --- 项目选择 --- */
.project-selection {
  margin-bottom: 40px;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 25px;
  color: var(--dark-color);
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 60px;
  height: 5px;
  background: var(--primary-gradient);
  border-radius: 2.5px;
}

.section-subtitle {
  display: block;
  font-size: 1.1rem;
  color: var(--gray-color);
  margin-top: 15px;
  max-width: 700px;
}

.search-filter {
  display: flex;
  gap: 25px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  align-items: center;
}

.search-box {
  flex: 1;
  min-width: 320px;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 15px 20px;
  padding-left: 50px;
  border: 2px solid var(--light-gray);
  border-radius: var(--border-radius);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: var(--transition);
  font-size: 1rem;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
}

.search-box i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-color);
  font-size: 1.2rem;
}

.filter-options {
  display: flex;
  gap: 12px;
}

.filter-btn {
  background-color: var(--light-gray);
  color: var(--gray-color);
  border: none;
  padding: 10px 20px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
  font-size: 0.95rem;
}

.filter-btn.active {
  background: var(--primary-gradient);
  color: white;
  box-shadow: 0 5px 15px rgba(67, 97, 238, 0.2);
}

.filter-btn:hover:not(.active) {
  background-color: #e6e8eb;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 35px;
}

.project-item {
  background-color: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.project-image-container {
  position: relative;
  overflow: hidden;
}

.project-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: var(--transition);
}

.project-item:hover .project-image {
  transform: scale(1.05);
}

.project-type-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
  color: white;
  z-index: 1;
}

.project-type-badge.education { background-color: #4361ee; }
.project-type-badge.health { background-color: #4cc9f0; }
.project-type-badge.environment { background-color: #16db65; }

.project-info {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.project-info h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  transition: var(--transition);
}

.project-item:hover .project-info h3 {
  color: var(--primary-color);
}

.project-description {
  color: var(--gray-color);
  margin-bottom: 20px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.stat-item {
  font-size: 0.95rem;
}

.stat-label {
  color: var(--gray-color);
  display: block;
  margin-bottom: 3px;
  font-size: 0.85rem;
}

.stat-value {
  font-weight: 600;
}

.project-progress {
  margin-bottom: 25px;
}

.progress-bar-container {
  height: 8px;
  background-color: var(--light-gray);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-text {
  font-size: 0.95rem;
  color: var(--gray-color);
  margin-top: 2px;
  text-align: right;
  font-weight: 500;
}

/* --- 支付方式选择 --- */
.payment-method-selection {
  margin-bottom: 40px;
}

.payment-methods {
  display: flex;
  gap: 25px;
  margin-bottom: 35px;
  flex-wrap: wrap;
}

.payment-method-item {
  flex: 1;
  min-width: 180px;
  padding: 30px 25px;
  border-radius: var(--border-radius);
  background: linear-gradient(135deg, #f0f2f5, white);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.payment-method-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.payment-method-item.active {
  background: var(--primary-gradient);
  color: white;
  box-shadow: 0 0 20px rgba(67, 97, 238, 0.4);
}

.method-icon {
  width: 60px;
  height: 60px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  margin-bottom: 15px;
  font-size: 1.8rem;
  box-shadow: 0 5px 15px rgba(67, 97, 238, 0.1);
}

.payment-method-item.active .method-icon {
  color: white;
  background: linear-gradient(135deg, #4361ee, #3f37c9);
  box-shadow: 0 0 20px rgba(67, 97, 238, 0.5);
}

.payment-method-item span {
  font-weight: 600;
  font-size: 1.1rem;
}

.payment-info {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 30px;
}

.payment-info h3 {
  font-size: 1.4rem;
  margin-bottom: 25px;
}

.input-group {
  margin-bottom: 25px;
}

.input-group label {
  display: block;
  margin-bottom: 10px;
  color: var(--gray-color);
  font-weight: 500;
}

.input-wrapper {
  position: relative;
}

.input-field {
  width: 100%;
  padding: 15px 20px;
  border: 2px solid var(--light-gray);
  border-radius: var(--border-radius);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: var(--transition);
  font-size: 1rem;
}

.input-field:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
}

.max-btn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary-light);
  color: var(--primary-color);
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
}

.max-btn:hover {
  background: var(--primary-color);
  color: white;
}

.input-row {
  display: flex;
  gap: 25px;
}

.input-row .input-group {
  flex: 1;
}

/* --- 确认捐赠 --- */
.donation-confirmation {
  margin-bottom: 40px;
}

.confirmation-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-bottom: 35px;
}

.detail-card {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 30px;
  transition: var(--transition);
}

.detail-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid var(--light-gray);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  color: var(--gray-color);
  font-size: 0.95rem;
}

.detail-value {
  font-weight: 500;
}

.summary-card {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 35px;
  margin-top: 30px;
  transition: var(--transition);
}

.summary-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.summary-header {
  display: flex;
  justify-content: space-between;
  font-size: 1.3rem;
  margin-bottom: 20px;
  font-weight: 700;
  color: var(--dark-color);
}

.summary-description {
  margin-bottom: 25px;
  color: var(--gray-color);
  line-height: 1.7;
}

/* --- 捐赠成功 --- */
.donation-success {
  text-align: center;
  max-width: 650px;
  margin: 0 auto;
}

.success-icon-container {
  position: relative;
  display: inline-block;
  margin-bottom: 30px;
}

.success-icon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--accent-color);
  opacity: 0.4;
  filter: blur(25px);
  z-index: -1;
}

.success-icon {
  width: 80px;
  height: 80px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  font-size: 2.5rem;
  box-shadow: 0 0 30px rgba(22, 219, 101, 0.5);
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.success-details {
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 30px;
  margin-bottom: 35px;
}

.transaction-hash {
  font-family: monospace;
  font-size: 0.9rem;
  color: var(--gray-color);
  word-break: break-all;
}

.success-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* --- 动画效果 --- */
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.6s cubic-bezier(0.58, 0.4, 0.42, 1.4);
}

.slide-right-enter-from,
.slide-right-leave-to {
  opacity: 0;
  transform: translateX(-80px);
}

.slide-left-enter-from,
.slide-left-leave-to {
  opacity: 0;
  transform: translateX(80px);
}

/* --- 响应式设计 --- */
@media (max-width: 1024px) {
  .project-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
  
  .confirmation-details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 25px;
  }
  
  .user-info {
    width: 100%;
    justify-content: space-between;
  }
  
  .project-list {
    grid-template-columns: 1fr;
  }
  
  .payment-methods {
    flex-direction: column;
    gap: 20px;
  }
  
  .input-row {
    flex-direction: column;
    gap: 20px;
  }
  
  .steps-indicator {
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
  }
  
  .step-item {
    min-width: 80px;
  }
}

@media (max-width: 480px) {
  .app-header h1 {
    font-size: 1.6rem;
  }
  
  .logo {
    width: 50px;
    height: 50px;
  }
  
  .logo-glow {
    width: 70px;
    height: 70px;
  }
  
  .step-content {
    padding: 25px;
  }
  
  .section-title {
    font-size: 1.7rem;
  }
  
  .search-filter {
    flex-direction: column;
    gap: 20px;
  }
  
  .search-box {
    min-width: 100%;
  }
  
  .filter-options {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .btn {
    padding: 10px 18px;
    font-size: 0.9rem;
  }
}
</style>
